<template>
	<view class="container">
		<view class="header">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#ff3b3b"
				tabbarBgImg="/icons/bar.png"></u-tabs>
		</view>
		<view class="box">
			<view class="content">
				<view class="nolist" v-if="orderList.length==0">
					<view style="text-align: center;">
						<view>
							<!-- <image src="@/static/order/noorder.png" mode="widthFix"></image> -->
						</view>
						<view style="color: #666;">暂无相关订单</view>
					</view>
				</view>
				<view class="list" v-for="(item,index) in orderList" :key="index" v-else @click="gourls(item.order_id)">
					<view class="title">
						<view class="order_num" style="font-size: 24rpx;color: #888">订单号：{{item.order_id}}</view>
						<view class="order_time">{{$dTime(item.create_time,2)}}</view>
						<view class="status">{{item.order_status_msg}}</view>
					</view>
					<view class="content_con">
						<view class="content_box" v-for="(item2,index2) in item.items" :key="index2">
							<view class="img_box">
								<image :src="item2.pic" mode="aspectFill"></image>
							</view>
							<view class="infos">
								<view class="name">
									<view style="display: flex;justify-content: space-between;align-items: center;">
										{{item.title}}
										<view class="sku">
											￥{{(item2.price/100).toFixed(2)}}
										</view>
									</view>
									<view style="margin-top: 20rpx;color: #999;font-size: 24rpx;display: flex;align-items: center;
									justify-content: space-between;">
										<text>{{item2.item_spec_desc}}</text>
										<text>{{'x '+item2.num}}</text>
									</view>
									<!-- <view>￥{{item2.goods_price}}</view> -->
								</view>
							</view>
						</view>
						<view class="total">
							<view></view>
							<view class="money">
								<text class="number">共{{item.items.length}}件商品</text>
								<text class="moneys">需付款<text>￥{{(item.total_fee/100).toFixed(2)}}</text></text>
							</view>
						</view>
					</view>
					<view class="btns">
						<view></view>
						<view class="btn_box" v-if="item.status_name == '待核销'">
							<view class="btn_boxs"
								@click="$gourl('/order/shopping/afterSale?order_id='+item.id+'&order_type=2')">申请售后
							</view>
							<view class="btn_boxs gureenbtn"
								@click.stop="$gourl('/group/index/writeOff?code='+item.verify.code+'&name='+item.group_content.title+'&price='+item.goods_amount)">
								核销码</view>
						</view>
						<view class="btn_box" v-if="item.status_name == '待付款'">
							<view class="btn_boxs" @click.stop="cancelClkick(item.id)">取消订单</view>
							<view class="btn_boxs gureenbtn" @click.stop="payClick(item)">付款</view>
						</view>
						<view class="btn_box" v-if="current == 3">
							<view class="btn_boxs">在线客服</view>
						</view>
						<!-- <view class="btn_box" v-if="item.status_name == '已核销'	">
							<view class="btn_boxs">去评价</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="page < count" :status="status" />
		<u-modal v-model="show" :content="content" @confirm="confirm"></u-modal>
		<u-popup v-model="payShow" mode="bottom" :closeable="true">
			<view class="mask_box">
				<view class="mask_title">请选择支付方式</view>
				<view class="pay_list">
					<view class="pay" @click="payType = 'wechat'">
						<view class="title">
							<image src="@/static/images/shops/wx.png" mode="aspectFill"></image>
							微信支付
						</view>
						<view class="select">
							<image src="@/static/images/shops/select.png" mode="" v-if="payType == 'wechat'"></image>
							<view class="yuan" v-else></view>
						</view>
					</view>
					<view class="pay" @click="payType = 'wallet'">
						<view class="title">
							<image src="@/static/images/shops/yue.png" mode="aspectFill"></image>
							余额支付<text style="font-size: 24rpx;color: #666;">({{money}})</text>
						</view>
						<view class="select">
							<image src="@/static/images/shops/select.png" mode="" v-if="payType == 'wallet'"></image>
							<view class="yuan" v-else></view>
						</view>
					</view>
					<view class="pay_btn" @click="pay_btn">确认支付</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待发货',
				}, {
					name: '待收货',
				}, {
					name: '已完成',
				}],
				orderList: [],
				show: false,
				content: '是否取消该订单',
				current: 0,
				count: 1,
				page: 1,
				status: 'loadmore',
				type: 'normal',
				hxCurrent: 0,
				cancelId: 0,
				userinfo: '',
				money: '0.00',
				total: '',
				order_sn: '',
				payShow: false,
				payType: 'wechat',
				orderStatus: ''
			}
		},
		onLoad(opdata) {
			this.current = opdata.current
		},
		onShow() {
			// if (uni.getStorageSync('userToken')) {
			// 	this.$u.api.getUSerInfo().then(res => {
			// 		this.userinfo = res.data
			// 		this.money = res.data.money

			// 	})
			// }
			this.getData()
		},
		onReachBottom() {
			if (this.page >= this.count) return;
			this.status = 'loading';
			this.page++
			this.getData()
		},
		methods: {
			gourls(order_sn) {
				console.log(order_sn);
				this.$gourl('/pages/index/orderDetails?order=' + order_sn)
				// if(this.userinfo.is_group_head == 1){
				// 
				// }
			},
			payClick(item) {
				this.payShow = true
				this.total = item.goods_amount
				this.order_sn = item.order_sn
				console.log(item)
			},
			pay_btn() {
				if (this.payType == 'wallet') {
					this.$u.api.goPrepay({
						order_sn: this.order_sn,
						payment: this.payType
					}).then(res => {
						this.$u.toast('支付成功')
						this.getData()
						this.order_sn = ''
						this.payShow = false
						this.page = 1
					})
				} else {
					this.$u.api.goPrepay({
						order_sn: this.order_sn,
						payment: this.payType,
						platform: 'wxMiniProgram'
					}).then(res => {
						let pay = res.data.pay_data
						let that = this.data
						uni.requestPayment({
							timeStamp: pay.timeStamp,
							nonceStr: pay.nonceStr,
							package: pay.package,
							signType: pay.signType,
							paySign: pay.paySign,
							// 支付成功的回调
							success(result) {
								console.log(result)
								if (result.errMsg == "requestPayment:ok") {
									that.$u.toast('支付成功')
									that.getData()
									that.order_sn = ''
									that.payShow = false
									that.page = 1
								}

							},
							// 支付失败回调
							fail(err) {
								uni.showToast({
									icon: "none",
									title: "支付失败"
								})
							}
						})
					})

				}
			},
			async getData() {
				uni.showLoading({
					title: '加载中'
				})
				await this.$allApi.orderList({
					page: this.page,
					pageSize: 15,
					order_type: this.type,
					status: this.orderStatus,
				}).then(res => {
					console.log(res);
					let datas = res.data.list
					if (this.page == 1) {
						this.orderList = datas
						this.count = Math.ceil(res.data.pager.count / res.data.pager.page_size)
					} else {
						this.orderList = this.orderList.concat(datas)
						if (this.page >= this.count) this.status = 'nomore';
					}
					uni.hideLoading()
				})
			},
			change(e) {
				console.log(e)
				this.current = e
				if (this.current == 0) {
					this.orderStatus = ''
				} else if (this.current == 1) {
					this.orderStatus = 5
				} else if (this.current == 2) {
					this.orderStatus = 1
				} else if (this.current == 3) {
					this.orderStatus = 2
				} else if (this.current == 4) {
					this.orderStatus = 3
				}
				this.page = 1
				this.getData()
			},
			cancelClkick(id) {
				this.show = true
				this.cancelId = id
			},
			confirm() {
				this.$u.api.orderCancel({
					id: this.cancelId
				}).then(res => {
					this.$u.toast('取消订单成功')
					this.page = 1
					this.getData()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-bottom: 30rpx;
	}

	.header {
		position: sticky;
		width: 100vw;
		top: 44px;
		background: #fff;
		z-index: 999;
		height: 80rpx;
		box-shadow: 0px 2px 5px 0px #eee;
	}

	.screen {
		height: 95rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: sticky;
		width: 100vw;
		top: 80rpx;
		background: #fff;
		z-index: 99;

		.btn {
			height: 45rpx;
			padding: 0 20rpx;
			font-size: 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 24rpx;
			color: #ff3b3b;
			border: 1px solid #eee;
			border-radius: 10rpx;
		}
	}

	.mask_box {
		padding: 30rpx;

		.pay_btn {
			height: 80rpx;
			width: 690rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background: #01c65d;
			border-radius: 10rpx;
		}

		.pay {
			display: flex;
			align-items: center;
			height: 120rpx;
			padding: 20rpx 0;

			justify-content: space-between;
			background: #fff;
			margin-bottom: 1px;

			.title {
				font-size: 30rpx;
				display: flex;
				align-items: center;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}
			}

			.select {
				image {
					width: 50rpx;
					height: 50rpx;
				}

				.yuan {
					width: 48rpx;
					height: 48rpx;
					border: 1px solid #aaa;
					border-radius: 50%;
				}
			}
		}
	}

	.content {
		padding: 0 25rpx;
		padding-top: 30rpx;

		.nolist {
			height: 50vh;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.list {
			padding: 20rpx 30rpx;
			background: #fff;
			margin-top: 30rpx;
			box-shadow: 0px 0 5px 2px #eee;
			border-radius: 20rpx;

			.title {
				padding-bottom: 20rpx;
				position: relative;
				align-items: center;
				border-bottom: 1px solid #eee;
				line-height: 1.5;

				.order_time {
					font-size: 24rpx;
					color: #999;
				}

				.status {
					position: absolute;
					right: -40rpx;
					top: 30rpx;
					// width: 138rpx;
					padding: 0 16rpx;
					font-size: 24rpx;
					height: 40rpx;
					display: flex;
					border-radius: 20rpx 0 0 20rpx;
					align-items: center;
					justify-content: center;
					background: #01c65d;
					color: #fff;
				}

				.status:after {
					// transparent
					border-right: 5px solid transparent;
					border-left: 5px solid #555555;
					border-bottom: 5px solid transparent;
					content: "";
					position: absolute;
					top: 40rpx;
					right: -10rpx;
					width: 0;
				}
			}

			.content_con {
				padding-top: 30rpx;

				.head {
					padding: 20rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 50rpx;
							height: 50rpx;
							border-radius: 10rpx;
							margin-right: 20rpx;
						}
					}
				}

				.content_box {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.img_box {
						width: 140rpx;
						height: 140rpx;

						image {
							width: 140rpx;
							height: 140rpx;
							border-radius: 20rpx;
						}
					}

					.infos {
						flex: 1;
						padding-left: 20rpx;

						.name {
							font-size: 32rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
						}

						.sku {
							font-size: 28rpx;
							color: #999;
							display: flex;
							line-height: 2;
							justify-content: space-between;
							align-items: center;
						}

					}
				}

				.total {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.money {
						font-size: 28rpx;
						text-align: right;
					}
				}
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;

				.btn_box {
					display: flex;
					align-items: center;

					.btn_boxs {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 68rpx;
						color: #bbb;
						border: 1px solid #bbb;
						border-radius: 20rpx;
						padding: 0 30rpx;
						margin-left: 20rpx;
					}

					.gureenbtn {
						border-color: #ff3b3b !important;
						color: #ff3b3b !important;
					}
				}

			}
		}
	}
</style>